<template>
  <div class="carlist ">
    <div style="width: 100%; position: fixed; z-index: 2;top: 0;background:#fff;">
      <div class="search" @click="search">
        <van-icon name="search" />
        <span>搜索商品, 共34145款好物</span>
      </div>
    </div>
    <div style="margin-top: 10%; width: 100%;">
      <div class="slide">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="item.name" v-for='(item, index) in sortList.categoryL1List' :key='index'
            @click="changeHandler(item.id)" style="height:25px; line-height: 1px;"/>
        </van-sidebar>
      </div>
      <div class="m-subCateList">
        <div class="banner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for='(item, index) in sortList.currentCategory.bannerList' :key='index'>
              <img :src="item.picUrl" alt="" style="width: 100% ;height: 106px;">
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="gird">
          <div class="gird_box" v-for="item in sortList.categoryGroupList" :key="item.id">
            <div class="gird_title">{{ item.name }}</div>
            <div class="gird_box">
              <ul class="gird_list" v-for="baskitem in item.categoryList" :key="baskitem.id"
                @click="godetailHandler(baskitem)">
                <li>
                  <img :src="baskitem.wapBannerUrl" alt="">
                  <div>{{ baskitem.name }}</div>
                </li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getSortList, categoryL2ListId } from '../../api/sort'
import { onMounted } from 'vue';
import { DataModel, SortModel, type ContainIdObject } from '../../api/sort'
import { useRouter } from 'vue-router'
const Router = useRouter();
const activeKey = ref(0)
const sortList = ref<DataModel>({
  categoryL1List: [],
  categoryL2List: [],
  currentCategory: { id: '' },
  categoryGroupList: []
})
onMounted(() => {
  getSortListHandler()
})
function changeHandler(id: string) {
  categoryL2ListIdHandler(id)
}
async function getSortListHandler() {
  try {
    let res = await getSortList()
    sortList.value = res.data
  } catch (error) {
    console.log(error)
  }
}
async function categoryL2ListIdHandler(id: string) {
  try {
    let res = await categoryL2ListId(id)
    sortList.value = res.data
  } catch (error) {
    console.log(error)
  }
}
function godetailHandler(baskitem: ContainIdObject) {
  Router.push({
    name: 'Detail',
    query: {
      categoryType: baskitem.categoryType,
      subCategoryId: baskitem.id,
      categoryId: baskitem.superCategoryId
    }
  })
}
function search() {
  Router.push('/search')
}
</script>
<style lang="less"  scoped>
.carlist {
  position: relative;
  height: 100%;
  width: 100%;
}

.slide {
  width: 22%;
  position:absolute;
  left: 0;
  height: 100%;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  font-size: 16px;
}

.van-sidebar {
  width: 2.16rem;
  padding: .53333rem 0;
}

.search {
  display: flex;
  justify-content: center;
  height: .74667rem;
  font-size: .37333rem;
  color: #333;
  line-height: .74667rem;
  background-color: #ededed;
  border-radius: .10667rem;
  margin: .2rem .4rem;
}

.search .van-icon {
  font-size: .53rem;
  color: #333;
}

.m-subCateList {
  width: 70%;
  margin-left: 2.16rem;
  padding: .4rem .4rem .28rem;
  height: 100%;
  overflow: hidden;
  border-top: 1px solid #ccc;
}

.banner {
  margin-bottom: .42667rem;
}

.gird {
  width: 100%;
  height: 100%;

  .gird_box {
    width: 100%;
    margin-bottom: 8px;
    flex-wrap: wrap;

    .gird_title {
      width: 100%;
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      font-weight: bold;
      border-bottom: 1px solid #b8b6b6;
      margin-bottom: 8px;
    }

    .gird_box {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .gird_list {
        display: flex;
        flex-wrap: wrap;

        li {
          width: 30%;
          height: 120px;
          text-align: center;

          img {
            width: 80px;
            height: 80px;
          }

          div {
            width: 80px;
            font-size: 14px;
          }
        }
      }

      &::after {
        content: '';
        width: 33%;
      }
    }

  }
}
</style>